<template>
  <!-- 填空题 类名blanks-->
  <div class="problem-box blanks p12">
    <div class="peoblem-main">
      <div class="problem-body">
        <div class="porblem-title">
          <i class="tag-type">填空</i>
          <h1 class="richText" v-html="title"></h1>
        </div>
        <div class="problem-content">
          <!-- 做题状态 li添加class  正确：right,错误：error -->
          <ul class="problem-options">
            <li
              v-for="(item, index) in correct_option"
              :key="index"
              :class="(show_answer?(is_test?(item==answer[index]?'right':'error'):'right'):(is_test?'':(done_show_answer?(item==answer[index]?'right':'error'):'')))"
            >
              <i class="check-box"></i>
              <div class="option">
                <span>{{index+1}}:</span>
                <!-- 未提交答案可做 -->
                <input type="text" placeholder="请输入答案" v-model="answer[index]"  v-if="!show_answer && !done_show_answer">
                <!-- 已提交答案不可做 -->
                <input type="text" placeholder="请输入答案" v-model="answer[index]" disabled  v-if="!show_answer &&done_show_answer">
                <!-- 考试查看解析不可做 -->
                <input type="text" placeholder="请输入答案" :value="answer[index]" disabled v-if="show_answer && is_test">
                <!-- 查看解析不可做 -->
                <input type="text" placeholder="请输入答案" :value="item" disabled v-if="show_answer && !is_test">
              </div>
            </li>
          </ul>
          <div class="submit-btn" @click="submit_answer" v-if="show_answer == false && done_show_answer == false">确认</div>
        </div>
        <div class="problem-answer p12" v-if="show_answer || done_show_answer">
          <div class="anser">
            <span>答案：</span>
            <p>
              <label v-for="(item, index) in correct_option" :key="index">{{index+1}}、{{item}}</label>
            </p>
          </div>
          <div class="analysis">
            <span>解析：</span>
            <p class="richText" v-html="parse"></p>
          </div>
        </div>
        <div class="problem-note bgc-fff bor4 p12" v-if="notes != '' && show_note">
          <div class="note-title">
            <h5>笔记</h5>
          </div>
          <div class="note-content">
            <p class="richText" v-html="notes"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { QuestionSubmit } from "../../api/api";
import { mapState } from "vuex";
export default {
  props: {
    // 题目详情
    details: {
      type: Object,
      default: () => {}
    },
    //笔记显示
    show_note: {
      type: Boolean,
      default: false
    },
    // 答案显示
    show_answer: {
      type: Boolean,
      default: false
    },
    //判断是否为考试
    is_test:{
      type : Boolean,
      default : false
    }
  },
  data() {
    return {
      title: this.details.title, //标题
      option: this.details.option, //选项
      correct_option: this.details.correct_option, //答案
      parse: this.details.parse, //解析
      notes: this.details.notes, //笔记
      answer: this.details.submit_answer ,//做题记录
      done_show_answer : this.details.done_show_answer,//是否提交答案
    };
  },
  methods: {
    // 提交答案
    submit_answer() {
      console.log(this.answer);
      let data = {
        answer: this.answer,
        currentId: this.details.id
      };
      QuestionSubmit(data)
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            this.$emit("submit-answer", {id:this.details.id,answer:data.answer});
            if (!this.is_test) {
              this.done_show_answer = true;
            }
          } else {
            this.$toast("答案提交失败");
          }
        })
        .catch(err => {
          this.$toast("答案提交失败");
        });
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/css/problem.css";
</style>


